<template>
	<view class="box">
		<view class="header">
			<view class="main">
				<view class="main-left">
					<image :src="headers.avatar" mode=""></image>
				</view>
				<view class="main-center">
					<view class="num">{{headers.phonenumber}}</view>
					<view class="phone">手机号:<span style="margin-left: 5rpx;">{{headers.phonenumber}}</span></view>
					<view class="state">
						<span>实名状态:</span>
						<view class="word">{{statusAPI(headers.status)}}</view>
					</view>
				</view>
				<view class="main-right" @click="goMsg">
					<u-icon name="chat" size="40"></u-icon>
				</view>
			</view>
		</view>
		<view class="income">
			<view class="title">年度总收益</view>
			<view class="num">¥ {{mineObject.totalIncome==null?'0':mineObject.totalIncome}}</view>
			<view class="time">
				<view class="yestoday">
					昨日收益 :
					<span>{{mineObject.yesterdayIncome==null?'0':mineObject.yesterdayIncome}}</span>
				</view>
				<view class="yestoday">
					本月收益 :
					<span>{{mineObject.currentMonthIncome==null?'0':mineObject.currentMonthIncome}}</span>
				</view>
			</view>
		</view>
		<view class="team">
			<view class="content">
				<view class="left" @click="linClick('0')">
					<view :class="{lineWord:tab=='0'}">我的团队</view>
					<view class="line" :class="{lineTab:tab=='0'}"></view>
				</view>
				<view class="left" @click="linClick('1')">
					<view :class="{lineWord:tab=='1'}">代理团队</view>
					<view class="line" :class="{lineTab:tab=='1'}"></view>
				</view>
			</view>
			<view class="main" v-if="tab=='0'">
				<view class="item">
					<span>{{myTeam.todayAdd}}</span>
					<text>今日新增</text>
				</view>
				<view class="item">
					<span>{{myTeam.yesterdayAdd}}</span>
					<text>昨日新增</text>
				</view>
				<view class="item">
					<span>{{myTeam.totalProxy}}</span>
					<text>全部代理</text>
				</view>
			</view>
			<view class="main" v-if="tab=='1'">
				<view class="item">
					<span>{{proxyTeam.todayAdd}}</span>
					<text>今日新增</text>
				</view>
				<view class="item">
					<span>{{proxyTeam.yesterdayAdd}}</span>
					<text>昨日新增</text>
				</view>
				<view class="item">
					<span>{{proxyTeam.totalProxy}}</span>
					<text>全部代理</text>
				</view>
			</view>
		</view>
		<view class="team">
			<view class="content">
				<view class="left" @click="linClick1('0')">
					<view :class="{lineWord:tab1=='0'}">我的订单</view>
					<view class="line" :class="{lineTab:tab1=='0'}"></view>
				</view>
				<view class="left" @click="linClick1('1')">
					<view :class="{lineWord:tab1=='1'}">代理订单</view>
					<view class="line" :class="{lineTab:tab1=='1'}"></view>
				</view>
			</view>
			<view class="main" v-if="tab1=='0'">
				<view class="item">
					<span>{{myOrder.todayAdd}}</span>
					<text>今日新增</text>
				</view>
				<view class="item">
					<span>{{myOrder.yesterdayAdd}}</span>
					<text>昨日新增</text>
				</view>
				<view class="item">
					<span>{{myOrder.totalOrder}}</span>
					<text>全部订单</text>
				</view>
			</view>
			<view class="main" v-if="tab1=='1'">
				<view class="item">
					<span>{{proxyOrder.todayAdd}}</span>
					<text>今日新增</text>
				</view>
				<view class="item">
					<span>{{proxyOrder.yesterdayAdd}}</span>
					<text>昨日新增</text>
				</view>
				<view class="item">
					<span>{{proxyOrder.totalOrder}}</span>
					<text>全部订单</text>
				</view>
			</view>
		</view>
		<view class="service">
			<view class="title">工具与服务</view>
			<view class="tool">
				<view class="val">
					<view class="top">
						<template v-for="(item,index) in serviceData">
							<view class="item" :key="index" @click="topClick(index)">
								<image :src="item.src" mode=""></image>
								<text>{{item.name}}</text>
							</view>
						</template>
					</view>
					<view class="bottom">
						<template v-for="(item,index) in serviceData1">
							<view class="item" :key="index" @click="bottomClick(index)">
								<image :src="item.src" mode=""></image>
								<text>{{item.name}}</text>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-modal v-model="show" :content="content" :show-title="false"></u-modal> -->
		<u-modal v-model="show" :content="content" :show-title="false" :show-cancel-button="true" @confirm="confirm"
			@cancel="cancel"></u-modal>
		<u-toast ref="uToast" />
		<!-- <u-modal v-model="showName" :content="contentName" :show-title="false" :show-cancel-button="true"
			@confirm="confirmName" @cancel="cancelName"></u-modal> -->
		<!-- <u-modal v-model="showModel" :content="contentModel" :show-title="false" :show-cancel-button="false" @confirm="confirmModel"></u-modal> -->
		<view class="modelBox" v-if="authShow">
			<view class="realName" style="height: 780rpx;">
				<view class="getname">
					<input type="text" placeholder="请输入真实姓名" v-model="form.name" />
				</view>
				<view class="getname">
					<input type="text" placeholder="请输入身份证账号" v-model="form.card" />
				</view>
				<view class="getname">
					<input type="text" placeholder="请输入银行卡卡号" v-model="form.bank" />
				</view>
				<view class="getname" style="margin-bottom: 40rpx;">
					<input type="text" placeholder="请输入开户行" v-model="form.open" />
				</view>
				<view class="getname" style="margin-bottom: 40rpx;">
					<input type="text" placeholder="请输入收款银行" v-model="form.bankName" />
				</view>
				<view class="tips" style="margin-bottom: 40rpx;">
					<view class="title">温馨提示:</view>
					<view class="detail">提现收款人必须是实名认证本人</view>
				</view>
				<view style="width: 100%;display: flex;justify-content: space-between;">
					<u-button size="medium" type="primary" @click="confirmClick(0)">取消</u-button>
					<u-button size="medium" type="primary" @click="confirmClick(1)">确认</u-button>
				</view>
			</view>
		</view>
		<!-- 点击实名的模态框 -->
		<view class="real" v-if="realModel">
			<view class="realName">
				<view class="getname" style="display: flex;align-items: center;">
					<span>姓名 :</span>
					<input type="text" v-model="formName" />
				</view>
				<view class="getname" style="margin-bottom: 50rpx;">
					<span>身份证 :</span>
					<input type="text" v-model="formCard" />
				</view>
				<view style="width: 100%;">
					<u-button type="primary" @click="formClick(0)">取消</u-button>
				</view>
			</view>
		</view>
		<!-- 收款账号 -->
		<view class="real" v-if="accountModel">
			<view class="realName" style="height: 800rpx;margin-top: 200rpx;">
				<view class="title">收款账户信息</view>
				<view class="getname" style="display: flex;align-items: center;">
					<span>姓名:</span>
					<input type="text" v-model="account.name" />
				</view>
				<view class="getname">
					<span>身份证:</span>
					<input type="text" v-model="account.card" />
				</view>
				<view class="getname">
					<span>收款行:</span>
					<input type="text" v-model="account.open" />
				</view>
				<view class="getname" style="margin-bottom: 100rpx;">
					<span>银行卡账号:</span>
					<input type="text" v-model="account.bank" />
				</view>
				<!-- <view class="getname" style="margin-bottom: 50rpx;">
					<span>开户行地址:</span>
					<view class="input" v-html="account.address"></view>
					
				</view> -->
				<view style="width: 100%;">
					<u-button type="primary" @click="formClick(1)">取消</u-button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		logout
	} from "@/apis/login.js"
	import {
		name
	} from "@/apis/name.js"
	import {
		auth
	} from "@/apis/auth.js"
	import {
		admin
	} from "@/apis/admin.js"
	import {
		userCenter
	} from "@/apis/mine.js"
	export default {
		data() {
			return {
				tab: '0',
				tab1: '0',
				show: false,
				showName: false,
				content: '',
				contentName: '',
				serviceData: [{
						src: "../../static/se-cai.jpg",
						name: '人工客服'
					},
					{
						src: "../../static/se-yong.jpg",
						name: '佣金明细'
					},
					{
						src: "../../static/se-jin.jpg",
						name: '提现记录'
					},
					{
						src: "../../static/se-shou.jpg",
						name: '收款账户'
					}
				],
				serviceData1: [{
						src: "../../static/se-shi.jpg",
						name: '实名认证'
					},
					{
						src: "../../static/se-geng.jpg",
						name: '更多设置'
					},
					{
						src: "../../static/se-tui.jpg",
						name: '退出登录'
					}
				],
				form: {
					name: '',
					card: '',
					bank: '',
					open: '',
					bankName: ''
				},
				// form: {
				// 	name: '',
				// 	card: '',
				// 	bank: '',
				// 	open: ''
				// },
				authShow: false,
				authData: '',
				contentModel: '',
				showModel: false,
				formName: '123',
				formCard: '123',
				realModel: false,
				accountModel: false,
				account: {
					name: '',
					card: '',
					bank: '',
					open: '',
					address: ''
				},
				mineObject:{},
				myTeam:{},
				proxyTeam:{},
				myOrder:{},
				proxyOrder:{},
				headers:{}
			};
		},
		onShow() {
			userCenter()
			.then(res=>{
				if(res.code===200){
					this.mineObject = res.data;
					this.myTeam = res.data.myTeam;
					this.proxyTeam = res.data.myTeam.proxyTeam;
					this.myOrder = res.data.myOrder;
					this.proxyOrder = res.data.myOrder.proxyOrder;
				}
			})
			admin()
			.then(res=>{
				if(res.code===200){
					this.headers = res.data;
				}
			})
		},
		methods: {
			statusAPI(val){
				if(val==='0'){
					return '正常'
				}else if(val==='1'){
					return '停用'
				}
			},
			regExp(val) {
				return function(str) {
					return val.test(str);
				}
			},
			
			async authApi() {
				const authData = await auth();
				if (authData.code === 200) {
					this.authData = authData.data;
				}
			},
			confirmClick(val) {
				if (val === 0) {
					//取消关闭模态框
					this.authShow = false;
				} else if (val === 1) {
					//确定
					if (this.form.name === '' || this.form.card === '' || this.form.bank === '' || this.form.open === '') {
						this.$refs.uToast.show({
							title: '请输入完整信息',
							type: 'error'
						})
						return;
					}
					const regExp = this.regExp(/^[\u4e00-\u9fa5]+(?: [\u4e00-\u9fa5]+)?$/);
					if (!regExp(this.form.name)) {
						this.$refs.uToast.show({
							title: '请输入正确格式的姓名',
							type: 'error'
						})
						return;
					}

					const regExpCard = this.regExp(
						/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)
					if (!regExpCard(this.form.card)) {
						this.$refs.uToast.show({
							title: '请输入正确格式的身份证号码',
							type: 'error'
						})
						return;
					}
					const regExpBank = this.regExp(/^\d{16,}$/);
					if (!regExpBank(this.form.bank)) {
						this.$refs.uToast.show({
							title: '请输入正确格式的银行卡号',
							type: 'error'
						})
						return;
					}
					const regExpOpen = this.regExp(/^[\u4e00-\u9fa5a-zA-Z0-9\s\.\-\(\)\/]+$/);
					if (!regExpOpen(this.form.open)) {
						this.$refs.uToast.show({
							title: '请输入正确格式的开户行',
							type: 'error'
						})
						return;
					}
					//确认掉接口
					name({
							realName: this.form.name,
							idCardNo: this.form.card,
							bankCardNumber: this.form.bank,
							openAccountBank: this.form.open,
							bankName: this.form.bankName
						})
						.then((res) => {
							if (res.code === 200) {
								this.authShow = false;
							} else {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error'
								})
								return;
							}
						})
				}
			},
			confirm() {
				logout()
					.then(res => {
						if (res.code === 200) {
							uni.clearStorageSync();
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}
					})

			},
			confirmName() {

			},
			//跳转消息
			goMsg() {
				uni.navigateTo({
					url: "/pages/msg/msg"
				})
			},
			cancel() {

			},
			linClick(val) {
				this.tab = val;
			},
			linClick1(val) {
				this.tab1 = val;
			},
			// 关闭实名信息的模态框
			formClick(val) {
				if (val === 0) {
					this.realModel = false;
				} else if (val === 1) {
					this.accountModel = false;
				}
			},
			async bottomClick(val) {
				console.log('shimuing', val)
				if (val === 0) {
					//实名认证
					const authData = await auth();
					if (authData.code === 200) {
						this.authData = authData.data;
						console.log('this.authData ', this.authData, authData)
						if (this.authData == '0') {
							// 未认证情况下打开模态框
							this.authShow = true;
							return;
						} else if (this.authData == '1') {
							//已认证的情况
							this.realModel = true;
							console.log('this.realModel', this.realModel)
							// 调用户信息接口拿数据
							admin()
								.then(res => {
									if (res.code === 200) {
										this.formCard = res.data.idCardNo;
										this.formName = res.data.realName;
									}
								})
						}
					}
				} else if (val === 1) {
					//更多设置
					uni.navigateTo({
						url: "/pages/me/me"
					})
				} else if (val === 2) {
					//退出登录
					this.show = true;
					this.content = '您确定要退出吗';

				}
			},


			async topClick(val) {
				if (val === 0) {
					//财务工单
					// uni.navigateTo({
					// 	url: "/pages/feed/feed"
					// })
					
					//人工客服
					uni.navigateTo({
						url:"/pages/chat/chat"
					})

				} else if (val === 1) {
					//佣金明细
					uni.navigateTo({
						url: "/pages/revenueRecords/revenueRecords"
					})
				} else if (val === 2) {
					//佣金提现
					const authData = await auth();
					if (authData.code === 200) {
						this.authData = authData.data;
						if (this.authData === '0') {
							// 未认证情况下打开模态框
							this.authShow = true;
							return;
						} else if (this.authData === '1') {
							//已认证的情况 跳转页面
							uni.navigateTo({
								url: "/pages/commission/commission"
							})
						}
					}
				} else if (val === 3) {
					//收款账户
					const authData = await auth();
					if (authData.code === 200) {
						this.authData = authData.data;
						if (this.authData === '0') {
							// 未认证情况下打开模态框
							this.authShow = true;
							return;
						} else if (this.authData === '1') {
							//已认证的情况
							this.accountModel = true;
							// 调用户信息接口拿数据
							admin()
								.then(res => {
									if (res.code === 200) {
										console.log('res44', res)
										this.account.name = res.data.realName;
										this.account.card = res.data.idCardNo;
										this.account.bank = res.data.bankCardNumber;
										this.account.open = res.data.bankName;
										// this.account.address = res.data.
									}
								})
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		width: 750rpx;
		background-color: #F0EFF4;
		padding: 70rpx 20px 20px 20px;
		box-sizing: border-box;

		.header {
			width: 100%;
			height: 180rpx;
			border-radius: 20rpx;
			background-color: white;
			padding: 15rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.main {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;

				.main-left {
					height: 100%;
					width: 160rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 90rpx;
					}
				}

				.main-center {
					height: 100%;
					width: 350rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 25rpx;
					margin-right: 60rpx;

					.state {
						display: flex;
						align-items: center;
						color: #767B7E;

						span {
							margin-right: 10rpx;
						}

						.word {
							width: 130rpx;
							height: 36rpx;
							border-radius: 10rpx;
							text-align: center;
							line-height: 36rpx;
							background-color: #E2321A;
							color: white;
						}
					}

					.num {
						font-size: 40rpx;
						font-weight: 1000;
						color: #E33319;
					}

					.phone {
						color: #767B7E;

						span {
							color: black;
						}


					}
				}
			}
		}

		.income {
			width: 100%;
			height: 270rpx;
			border-radius: 22rpx;
			background-color: white;
			padding: 25rpx 0 20rpx 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.title {
				font-size: 40rpx;
			}

			.num {
				width: 100%;
				height: 140rpx;
				line-height: 150rpx;
				text-align: center;
				font-weight: 1000;
				font-size: 60rpx;
				color: #E5311A;
			}

			.time {
				height: 46rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;

				.yestoday {
					height: 100%;
					width: 50%;

					span {
						margin-left: 30rpx;
						font-weight: 1000;
					}
				}
			}
		}

		.team {
			width: 100%;
			height: 260rpx;
			border-radius: 22rpx;
			background-color: white;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;

			.content {
				width: 100%;
				height: 50%;
				display: flex;
				padding: 30rpx 0 0 30rpx;

				.left {
					height: 100%;
					width: 130rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					overflow: hidden;
					margin-right: 50rpx;

					.line {
						width: 40rpx;
						height: 6rpx;
						background-color: white;
						// border-top: 6rpx solid white;
						margin-top: 10rpx;
						border-radius: 6rpx;
					}

					.lineTab {
						background-color: #FB0102;
					}

					.lineWord {
						font-weight: 1000;
					}
				}
			}

			.main {
				flex-grow: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				.item {
					height: 125rpx;
					width: 33%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 22rpx;

					span {
						font-size: 38rpx;
						font-weight: 10000;
						color: #FB0102;
					}

					text {
						color: #9E9E9E;
					}
				}
			}
		}

		.service {
			width: 100%;
			height: 390rpx;
			border-radius: 22rpx;
			background-color: white;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			padding: 25rpx;
			box-sizing: border-box;

			.title {
				width: 100%;
				height: 50rpx;
				margin-bottom: 10rpx;
				line-height: 50rpx;
				font-weight: 1000;
				font-size: 30rpx;
			}

			.tool {
				width: 100%;
				height: 270rpx;

				.val {
					height: 100%;
					width: 100%;

					.top {
						height: 50%;
						width: 100%;
						display: flex;

						.item {
							height: 100%;
							width: 25%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-evenly;

							image {
								height: 70rpx;
								width: 70rpx;
							}

							text {
								font-size: 22rpx;
								font-weight: 1000;
							}
						}
					}

					.bottom {
						width: 100%;
						height: 50%;
						display: flex;

						.item {
							height: 100%;
							width: 25%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-evenly;

							image {
								height: 70rpx;
								width: 70rpx;
							}

							text {
								font-size: 22rpx;
								font-weight: 1000;
							}
						}
					}
				}
			}
		}

		.modelBox {
			width: 750rpx;
			height: 100vh;
			background-color: rgba(51, 51, 51, .4);
			position: fixed;
			z-index: 99;
			left: 0;
			top: 0;
			overflow: hidden;
			padding: 0 42rpx;
			box-sizing: border-box;

			.realName {
				width: 100%;
				height: 700rpx;
				margin-top: 300rpx;
				background-color: white;
				border-radius: 20rpx;
				padding: 70rpx;
				box-sizing: border-box;


				.getname {
					width: 100%;
					height: 70rpx;
					border-bottom: 1rpx solid #818181;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					input {
						width: 100%;
					}
				}

				.tips {
					color: #CCCCCC;
					font-size: 23rpx;

					.title {
						margin-bottom: 10rpx;
					}
				}
			}
		}

		.real {
			width: 750rpx;
			height: 100vh;
			background-color: rgba(51, 51, 51, .4);
			position: fixed;
			z-index: 99;
			left: 0;
			top: 0;
			overflow: hidden;
			padding: 0 42rpx;
			box-sizing: border-box;

			.realName {
				width: 100%;
				min-height: 400rpx;
				margin-top: 400rpx;
				background-color: white;
				border-radius: 20rpx;
				padding: 70rpx;
				box-sizing: border-box;

				.title {
					width: 100%;
					min-height: 40rpx;
					font-size: 32rpx;
					font-weight: 1000;
					text-align: center;
					margin-bottom: 32rpx;
				}

				.getname {
					width: 100%;
					min-height: 70rpx;
					border-bottom: 1rpx solid #818181;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					span {
						margin-right: 10rpx;
					}

					.input {
						width: 69%;
						word-wrap: break-word;
					}

					input {
						width: 69%;

					}
				}

				.tips {
					color: #CCCCCC;
					font-size: 23rpx;

					.title {
						margin-bottom: 10rpx;
					}
				}
			}
		}

	}
</style>